import React, { Component } from 'react'
// 使用他的内容，store
import store from "../../redux/store"
// 引入actionCreate 专门用于创建action对象
import  {createIncrementAction,createDecrementAction,constcreateIncrementAsyncAction} from "../../redux/count_action"
export default class Count extends Component {
    // 组件已挂载.这边的弊端就是将来多个组件使用的时候，每次都要进文件写，我们去入口文件index.jsx中去写。
    // componentDidMount(){
    //     // 监测redux中的变化，只要变化就更新渲染
    //     store.subscribe(()=>{
    //         // 调用它，他就会更新页面
    //         this.setState({})
    //     })
    // }
    increment=()=>{
        // // 利用ref拿到select中的值
        // const {value}=this.selectNum
        // // 拿到初始化的值
        // const {count}=this.state
        // // 重新相加
        // this.setState({count:count+value*1})



        const {value}=this.selectNum
        // 通知redux加value
        store.dispatch(createIncrementAction(value*1))
    }
    decrement=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        // // 拿到初始化的值
        // const {count}=this.state
        // // 重新相加
        // this.setState({count:count-value*1})
        store.dispatch(createDecrementAction(value*1))
    }
    incrementIfOdd=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        // // 拿到初始化的值
        // const {count}=this.state
        const count=store.getState()
        if(count%2!==0){
            // 重新相加
            // this.setState({count:count+value*1}) 
            store.dispatch(createIncrementAction(value*1))
        }
    }
    incrementasync=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        // 拿到初始化的值
        // const {count}=this.state
    //    setTimeout(()=>{
            // 重新相加
            // this.setState({count:count+value*1}) 
            store.dispatch(constcreateIncrementAsyncAction(value*1))
            
    //    },2000) 
    }
    render() {
        return (
            <div>
                <h1>当前求和：{store.getState()}</h1>
                <select ref={c=>this.selectNum=c}>
                    <option value="1"> 1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前数为积数再加</button>
                <button onClick={this.incrementasync}>异步再加</button>
            </div>
        )
    }
}
